<div th:fragment="html">
    <script>
        $(function(){
            var data4Vue = {
                uri:'forecart',
                orderItems:[]
            };
            //ViewModel
            var vue = new Vue({
                el: '#workingArea',
                data: data4Vue,
                mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                    this.load();
                },
                methods: {
                    load:function(){
                        var url =  this.uri;
                        axios.get(url).then(function(response) {
                            vue.orderItems = response.data;
                            vue.$nextTick(function(){
                                linkDefaultActions();
                                cartPageRegisterListeners();
                            })
                        });
                    }
                }
            });

        })

        var deleteOrderItem = false;
        var deleteOrderItemid = 0;
        function cartPageRegisterListeners(){
            $("a.deleteOrderItem").click(function(){
                deleteOrderItem = false;
                var oiid = $(this).attr("oiid")
                deleteOrderItemid = oiid;
                $("#deleteConfirmModal").modal('show');
            });
            $("button.deleteConfirmButton").click(function(){
                deleteOrderItem = true;
                $("#deleteConfirmModal").modal('hide');
            });

            $('#deleteConfirmModal').on('hidden.bs.modal', function (e) {
                if(deleteOrderItem){

                    var url = "foredeleteOrderItem?oiid="+deleteOrderItemid;
                    axios.get(url).then(function(response){
                        if(0==response.data.code){
                            $("tr.cartProductItemTR[oiid="+deleteOrderItemid+"]").hide();
                        }
                        else{
                            location.href="login";
                        }
                    });
                }
            })

            $("img.cartProductItemIfSelected").click(function(){
                var selectit = $(this).attr("selectit")
                if("selectit"==selectit){
                    $(this).attr("src","img/site/cartNotSelected.png");
                    $(this).attr("selectit","false")
                    $(this).parents("tr.cartProductItemTR").css("background-color","#fff");
                }
                else{
                    $(this).attr("src","img/site/cartSelected.png");
                    $(this).attr("selectit","selectit")
                    $(this).parents("tr.cartProductItemTR").css("background-color","#FFF8E1");
                }
                syncSelect();
                syncCreateOrderButton();
                calcCartSumPriceAndNumber();
            });
            $("img.selectAllItem").click(function(){
                var selectit = $(this).attr("selectit")
                if("selectit"==selectit){
                    $("img.selectAllItem").attr("src","img/site/cartNotSelected.png");
                    $("img.selectAllItem").attr("selectit","false")
                    $(".cartProductItemIfSelected").each(function(){
                        $(this).attr("src","img/site/cartNotSelected.png");
                        $(this).attr("selectit","false");
                        $(this).parents("tr.cartProductItemTR").css("background-color","#fff");
                    });
                }
                else{
                    $("img.selectAllItem").attr("src","img/site/cartSelected.png");
                    $("img.selectAllItem").attr("selectit","selectit")
                    $(".cartProductItemIfSelected").each(function(){
                        $(this).attr("src","img/site/cartSelected.png");
                        $(this).attr("selectit","selectit");
                        $(this).parents("tr.cartProductItemTR").css("background-color","#FFF8E1");
                    });
                }
                syncCreateOrderButton();
                calcCartSumPriceAndNumber();

            });

            $(".orderItemNumberSetting").keyup(function(){
                var pid=$(this).attr("pid");
                var stock= $("span.orderItemStock[pid="+pid+"]").text();
                var price= $("span.orderItemPromotePrice[pid="+pid+"]").text();

                var num= $(".orderItemNumberSetting[pid="+pid+"]").val();
                num = parseInt(num);
                if(isNaN(num))
                    num= 1;
                if(num<=0)
                    num = 1;
                if(num>stock)
                    num = stock;

                syncPrice(pid,num,price);
            });

            $(".numberPlus").click(function(){

                var pid=$(this).attr("pid");
                var stock= $("span.orderItemStock[pid="+pid+"]").text();
                var price= $("span.orderItemPromotePrice[pid="+pid+"]").text();
                var num= $(".orderItemNumberSetting[pid="+pid+"]").val();

                num++;
                if(num>stock)
                    num = stock;
                syncPrice(pid,num,price);
            });
            $(".numberMinus").click(function(){
                var pid=$(this).attr("pid");
                var stock= $("span.orderItemStock[pid="+pid+"]").text();
                var price= $("span.orderItemPromotePrice[pid="+pid+"]").text();

                var num= $(".orderItemNumberSetting[pid="+pid+"]").val();
                --num;
                if(num<=0)
                    num=1;
                syncPrice(pid,num,price);
            });

            $("button.createOrderButton").click(function(){
                var params = "";
                $(".cartProductItemIfSelected").each(function(){
                    if("selectit"==$(this).attr("selectit")){
                        var oiid = $(this).attr("oiid");
                        params += "&oiid="+oiid;
                    }
                });
                params = params.substring(1);
                location.href="buy?"+params;
            });
        }

        function syncCreateOrderButton(){
            var selectAny = false;
            $(".cartProductItemIfSelected").each(function(){
                if("selectit"==$(this).attr("selectit")){
                    selectAny = true;
                }
            });

            if(selectAny){
                $("button.createOrderButton").css("background-color","#C40000");
                $("button.createOrderButton").removeAttr("disabled");
            }
            else{
                $("button.createOrderButton").css("background-color","#AAAAAA");
                $("button.createOrderButton").attr("disabled","disabled");
            }

        }
        function syncSelect(){
            var selectAll = true;
            $(".cartProductItemIfSelected").each(function(){
                if("false"==$(this).attr("selectit")){
                    selectAll = false;
                }
            });

            if(selectAll)
                $("img.selectAllItem").attr("src","img/site/cartSelected.png");
            else
                $("img.selectAllItem").attr("src","img/site/cartNotSelected.png");

        }
        function calcCartSumPriceAndNumber(){
            var sum = 0;
            var totalNumber = 0;
            $("img.cartProductItemIfSelected[selectit='selectit']").each(function(){
                var oiid = $(this).attr("oiid");
                var price =$(".cartProductItemSmallSumPrice[oiid="+oiid+"]").text();
                price = price.replace(/,/g, "");
                price = price.replace(/￥/g, "");
                sum += new Number(price);

                var num =$(".orderItemNumberSetting[oiid="+oiid+"]").val();
                totalNumber += new Number(num);

            });

            $("span.cartSumPrice").html("￥"+formatMoney(sum));
            $("span.cartTitlePrice").html("￥"+formatMoney(sum));
            $("span.cartSumNumber").html(totalNumber);
        }
        function syncPrice(pid,num,price){
            $(".orderItemNumberSetting[pid="+pid+"]").val(num);
            var cartProductItemSmallSumPrice = formatMoney(num*price);
            $(".cartProductItemSmallSumPrice[pid="+pid+"]").html("￥"+cartProductItemSmallSumPrice);
            calcCartSumPriceAndNumber();

            var url = "forechangeOrderItem?pid="+pid+"&num="+num;
            axios.get(url).then(function(response){
                if(0!=response.data.code){
                    location.href="login";
                }
            });
        }
    </script>

    <title>购物车</title>
    <div class="cartDiv">
        <div class="cartTitle pull-right">
            <span>已选商品  (不含运费)</span>
            <span class="cartTitlePrice">￥0.00</span>
            <button class="createOrderButton" disabled="disabled">结 算</button>
        </div>

        <div class="cartProductList">
            <table class="cartProductTable">
                <thead>
                <tr>
                    <th class="selectAndImage">
                        <img selectit="false" class="selectAllItem" src="img/site/cartNotSelected.png">
                        全选

                    </th>
                    <th>商品信息</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th width="120px">金额</th>
                    <th class="operation">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr :oiid="oi.id" class="cartProductItemTR" v-for="oi in orderItems">
                    <td>
                        <img selectit="false" :oiid="oi.id" class="cartProductItemIfSelected" src="img/site/cartNotSelected.png">
                        <a style="display:none" href="#nowhere"><img src="img/site/cartSelected.png"></a>
                        <img class="cartProductImg"  :src="'img/productSingle_middle/'+oi.product.firstProductImage.id+'.jpg'">
                    </td>
                    <td>
                        <div class="cartProductLinkOutDiv">
                            <a :href="'product?pid='+oi.product.id" class="cartProductLink">{{oi.product.name}}</a>
                            <div class="cartProductLinkInnerDiv">
                                <img src="img/site/creditcard.png" title="支持信用卡支付">
                                <img src="img/site/7day.png" title="消费者保障服务,承诺7天退货">
                                <img src="img/site/promise.png" title="消费者保障服务,承诺如实描述">
                            </div>
                        </div>

                    </td>
                    <td>
                        <span class="cartProductItemOringalPrice">￥{{oi.product.originalPrice|formatMoneyFilter}}</span>
                        <span  class="cartProductItemPromotionPrice">￥{{oi.product.promotePrice|formatMoneyFilter}}</span>

                    </td>
                    <td>

                        <div class="cartProductChangeNumberDiv">
                            <span class="hidden orderItemStock " :pid="oi.product.id">{{oi.product.stock}}</span>
                            <span class="hidden orderItemPromotePrice " :pid="oi.product.id">{{oi.product.promotePrice}}</span>
                            <a  :pid="oi.product.id" class="numberMinus" href="#nowhere">-</a>
                            <input :pid="oi.product.id" :oiid="oi.id" class="orderItemNumberSetting" autocomplete="off" :value="oi.number">
                            <a  :stock="oi.product.stock" :pid="oi.product.id" class="numberPlus" href="#nowhere">+</a>
                        </div>

                    </td>
                    <td >
                                <span class="cartProductItemSmallSumPrice" :oiid="oi.id" :pid="oi.product.id" >
                                    ￥ {{oi.product.promotePrice*oi.number|formatMoneyFilter}}
                                </span>

                    </td>
                    <td>
                        <a class="deleteOrderItem" :oiid="oi.id"  href="#nowhere">删除</a>
                    </td>
                </tr>
                </tbody>

            </table>
        </div>

        <div class="cartFoot">
            <img selectit="false" class="selectAllItem" src="img/site/cartNotSelected.png">
            <span>全选</span>
            <!--         <a href="#">删除</a> -->

            <div class="pull-right">
                <span>已选商品 <span class="cartSumNumber" >0</span> 件</span>

                <span>合计 (不含运费): </span>
                <span class="cartSumPrice" >￥0.00</span>
                <button class="createOrderButton" disabled="disabled" >结  算</button>
            </div>

        </div>

    </div>
</div>